<template>
	<view style="padding: 20rpx;">
		<view v-for="(item,index) in orderlist" :key="index">

			<view class="cards" style="height: 380rpx;display: block;width: 100%;"  v-if="item.status=='F'"  @longpress="delte(item.id)">
				<view style="display: flex;margin-top: 30rpx;">
					<image :src="item.filmImage" mode="scaleToFill"
						style="width: 170rpx;height: 240rpx;border-radius: 10rpx;">
					</image>
					<view style="padding: 15rpx;width: 400rpx;">
						<view style="margin-top: -17rpx;" class="hide">
							<text
								style="font-size: 32rpx;font-weight: 500;width: 400rpx;color: rgba(0,0,0,0.7);">{{item.filmName}}</text>
							<text style="color:rgba(0,0,0,0.7);margin-left: 15rpx;font-size: 32rpx;">{{item.count}}张</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.showTime | formatDate(item.duration)}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.cinemaName}}-{{item.hallName | getstringleft}} </text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;col or: #9a9a9a;">{{item.selectSeat | formatInfo}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text
								style="font-size:28rpx;color:#9a9a9a;margin-top: 20rpx;">总价：{{item.countPrice}}元</text>
						</view>
						
					</view>
					<view style="flex: 1;text-align: right; display: flex;" >
					
						<text
							style="color: RGBA(153, 153, 153, 1);">已出票</text>
							
					</view>
				</view>

				<view style="float: right;margin-top: 0rpx;">
					<u-button  hover-class="none" type="info" :hair-line="false" shape="circle" :custom-style="{'height':'60rpx','borderColor':'#EDEAED','color':'#6e6e6f','backgroundColor':'#FFFFFF'}"  @click="goinfo(item)">查看取票码</u-button>
				</view>
			</view>
			<view class="cards" style="height: 300rpx;display: block;width: 100%;"
				v-if="(item.orderStatus =='F' && item.status =='P') || (item.orderStatus =='F' && item.status =='W')" @longpress="delte(item.id)">
				<view style="display: flex;">
				</view>
				<view style="margin-top: 0rpx;">
					<!-- <u-line color="#868686" border-style="solid" /> -->
				</view>

				<view style="display: flex;width: 100%;margin-top: 15rpx;">
					<image :src="item.filmImage" mode="scaleToFill"
						style="width: 170rpx;height: 240rpx;border-radius: 10rpx;">
					</image>

					<view style="padding: 15rpx;width: 400rpx;">
						<view style="margin-top: -17rpx;" class="hide">
							<text
								style="font-size: 32rpx;font-weight: 500;width: 400rpx;color: rgba(0,0,0,0.7);">{{item.filmName}}</text>
							<text style="color:rgba(0,0,0,0.7);margin-left: 15rpx;font-size: 32rpx;">{{item.count}}张</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.showTime | formatDate(item.duration)}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.cinemaName}}-{{item.hallName | getstringleft}} </text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;col or: #9a9a9a;">{{item.selectSeat | formatInfo}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text
								style="font-size:28rpx;color:#9a9a9a;margin-top: 20rpx;">总价：{{item.countPrice}}元</text>
						</view>
					</view>
					<view style="flex: 1;text-align: right; display: flex;" >
					
						<text
							style="color: RGBA(153, 153, 153, 1);">{{item.orderStatus | formatStatus(item.status)}}</text>
							<view class="dot">
								<text
									style="color: RGBA(153, 153, 153, 1);">...</text>
								
							</view>
					</view>
				</view>
			</view>
			<view class="cards" style="height: 300rpx;display: block;width: 100%;"
				v-if="item.orderStatus =='W'" @longpress="delte(item.id)" @click="goorderinfo(item)">
				<view style="display: flex;">
				</view>
				<view style="margin-top: 0rpx;">
					<!-- <u-line color="#868686" border-style="solid" /> -->
				</view>
			
				<view style="display: flex;width: 100%;margin-top: 15rpx;">
					<image :src="item.filmImage" mode="scaleToFill"
						style="width: 170rpx;height: 240rpx;border-radius: 10rpx;">
					</image>
			
					<view style="padding: 15rpx;width: 400rpx;">
						<view style="margin-top: -17rpx;" class="hide">
							<text
								style="font-size: 32rpx;font-weight: 500;width: 400rpx;color: rgba(0,0,0,0.7);">{{item.filmName}}</text>
							<text style="color:rgba(0,0,0,0.7);margin-left: 15rpx;font-size: 32rpx;">{{item.count}}张</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.showTime | formatDate(item.duration)}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;color: #6d6d6d;font-weight: 500;">{{item.cinemaName}}-{{item.hallName | getstringleft}} </text>
						</view>
						<view style="margin-top: 10rpx;">
							<text style="font-size: 28rpx;col or: #9a9a9a;">{{item.selectSeat | formatInfo}}</text>
						</view>
						<view style="margin-top: 10rpx;">
							<text
								style="font-size:28rpx;color:#9a9a9a;margin-top: 20rpx;">总价：{{item.countPrice}}元</text>
						</view>
					</view>
					<view style="flex: 1;text-align: right; display: flex;" >
					
						<text
							style="color: RGBA(153, 153, 153, 1);">{{item.orderStatus | formatStatus(item.status)}}</text>
							
					</view>
				</view>
			</view>
		</view>


		<u-modal @confirm="deleteor()" v-model="delshow" content="是否删除此订单" confirm-text="删除" cancel-text="取消" :show-cancel-button="true"></u-modal>
		<u-modal v-model="show" :content="content" @confirm="golist"></u-modal>
		<u-modal v-model="qxshow" :content="qxcontent" @cancel="cancel()" confirm-text="再想想" cancel-text="取消"
			:show-confirm-button="true" :show-cancel-button="true"> </u-modal>
		<view v-if="isNull" style="margin-top: 230rpx;width: 100%; ;">
			<u-empty text="暂无订单信息" mode="order"></u-empty>
			<view style="margin-left: 240rpx;margin-top: 40rpx;">
				<u-button shape="square" size="medium" :custom-style="{backgroundColor:'#EA5344',color:'#FFFFFF'}" @click="goindex">去购票</u-button>
			</view>
			
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				delshow:false,
				isNull:false,
				orderlist: [],
				show: false,
				qxshow: "",
				content: "",
				qxcontent: "",
				tradeNum: "",
				delid:""
			}
		},
		filters: {
			
			getstringleft: function(value) {
				let a = value.indexOf('厅')
				if (a != -1) {
					return value.substr(0, a + 1)
				} else {
					return value
				}
			},
			formattime: function(value) {


				let jsonA = JSON.parse(value)
				let date = Date.parse(new Date()) / 1000;
				let timeStamp = parseInt(jsonA['timeStamp']);
				return timeStamp + 300 - date
			},
			formatDate: function(value,timelong) {
				value = value+""
				value = value.replace(/-/g, "/");
				value = value+""
				timelong =timelong+""
				timelong = timelong.replace(/分钟/g,'')
				let hours = value.split(" ")[1].split(":")[0]
				let mins = value.split(" ")[1].split(":")[1]
				let startTime = hours + ":" + mins
				let tmphours = parseInt(timelong / 60) + parseInt(hours)
				let tmpmins = timelong % 60 + parseInt(mins)
				if (tmpmins >= 60) {
					tmphours++
					tmpmins = tmpmins - 60
				}
				if (tmphours >= 24) {
					tmphours = tmphours - 24
				}
				if (tmpmins < 10) {
					tmpmins = '0' + tmpmins
				}
				if (tmphours < 10) {
					tmphours = '0' + tmphours
				}
				let endTime = tmphours + ":" + tmpmins
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var nowT = new Date();
				var weekName = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
				if(nowT > date && date.toLocaleDateString() != nowT.toLocaleDateString()){
					var Y = date.getFullYear() + '年';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日 ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
					//var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Y + M + D + h + m +"-"+endTime;
				}else{
					if(date.getDate() == nowT.getDate()){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "今天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+1){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "明天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+2){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "后天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}
				}
				
			},
			formatInfo: function(seatinfo) {
				let a = seatinfo.split(',')
				let b = ''
				for (var i = 0; i < a.length; i++) {
					b = b + a[i].replace(/:/g, "排") + "座 "
				}
				return b
			},
			formatStatus: function(status1, status2) {

				let orderStatusList = {
					'W': '待支付',
					'P': '支付中',
					'F': '已支付',
					'C': '已取消',
					'B': '已退款',
					'E': '支付失败'
				}
				let StatusList = {
					'W': '待购票',
					'P': '出票中',
					'F': '已出票',
					'C': '已取消',
					'B': '已退款',
					'E': '购票失败'
				}
				if (status1 == "W" && status2 == "W") {
					return "待支付"
				}
				if (status1 == "P") {
					return "支付中"
				}
				if (status1 == "F" && status2 == "P") {
					return "出票中"
				}
				if (status1 == "F" && status2 == "W") {
					return "出票中"
				}
				if ((status1 == "F" && status2 == "C") || (status1 == "C")) {
					return "已取消"
				}
				if ((status1 == "F" && status2 == "B") || (status1 == "B")) {
					return "已退款"
				}
				if (status1 == "F" && status2 == "E") {
					return "购票失败"
				}
				if (status1 == "E") {
					return "支付失败"
				}
				//orderStatusList[status1] + "	" +
				let tmpstatus1 = StatusList[status2]

				return tmpstatus1
			}
		},
		//监听页面卸载
		onUnload() {
			uni.redirectTo({
				url: '../my/my',
			})
		},
		onShow() {
			this.orderlist= []
			this.getOrderlist()
		},
		onLoad() {
			//this.getOrderlist()
		},
		onPullDownRefresh() {
			this.orderlist= []
			this.getOrderlist()
		},
		methods: {
			goindex(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			},
			goorderinfo(item){
				uni.setStorageSync('ticketinfo', item)
				uni.navigateTo({
					url:"../orderinfo/orderinfo"
				})
			},
			deleteor(){
				let that = this;
				uni.request({
					url: Config.ServerIP + "/wxpay/app/pay/payOrder/" + that.delid  ,
					method: "DELETE",
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (resb) => {
						that.$refs.uToast.show({
							title: '订单已删除',
							type: 'error'
						})
				
					}
				})
				that.orderlist = []
				var t
				clearTimeout(t)
				t = setTimeout(function() {
					that.getOrderlist()
					// window.eventHub.$emit('refreshList', '')// 更新右侧列表状态
				}, 2000)
							
			},
			delte(id){
				
				this.delid = id
				this.delshow=true
			},
			iscancel(tradeNum) {
				
				this.tradeNum = tradeNum
				this.qxcontent = "是否取消此订单"
				this.qxshow = true
			},
			gocinameinfo(id) {
				uni.navigateTo({
					url: '/pages/cinemaadds/cinemaadds?id=' + id
				});
			},
			downend() {

			},
			ticketret(str) {
				
				var reg = /[\u4e00-\u9fa5]+([1-9]\d*)[\u4e00-\u9fa5]+([1-9]\d*)[\u4e00-\u9fa5]+/;
				var cardnum = str.match(reg);
				
				if (cardnum != null) {
					var sps = cardnum[1];
					var pps = cardnum[2];
					return sps + '|' + pps
				} else {
					reg = /[\u4e00-\u9fa5]+(\w+)[\u4e00-\u9fa5]+/;
					cardnum = str.match(reg);
					if (cardnum != null) {
						var pps = cardnum[1];
						return pps
					} else {
						return str
					}
				}
			},
			cancel() {
				let that = this;
				uni.request({
					url: Config.ServerIP + "/wxpay/app/pay/payOrder/cancel/" + that.tradeNum,
					method: "PUT",
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (resb) => {
						that.$refs.uToast.show({
							title: '订单已取消',
							type: 'error'
						})
					}
				})
				that.orderlist = []
				var t
				clearTimeout(t)
				t = setTimeout(function() {
					that.getOrderlist()
					// window.eventHub.$emit('refreshList', '')// 更新右侧列表状态
				}, 2000)
			
			},
			golist() {
				uni.navigateTo({
					url: '/pages/orderlist/orderlist'
				});
			},
			gopay(item) {
				
				
				let that = this;
				let payinfo = JSON.parse(item.payParam)
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payinfo.timeStamp,
					nonceStr: payinfo.nonceStr,
					package: payinfo.package,
					signType: payinfo.signType,
					paySign: payinfo.paySign,
					success: function(resa) {
						uni.request({
							url: Config.ServerIP + "/wxpay/app/pay/payOrder/update/" + item.tradeNum,
							method: "PUT",
							header: {
								Authorization: 'Bearer ' + Config.token
							},
							success: (resb) => {
								that.getOrderlist()
								that.content = "支付成功"
								that.show = true
								uni.requestSubscribeMessage({
								  tmplIds: ['ulMLPRXZuPauWmbgkJvs8x-V3du0UGvLccS1BKUm9mE','1zkPNp3eUi2KXnJ-NFrYHpfipBAU4PwIoVBRrLhGVHQ','k6GZgHJrVPitH31pm6PJSQQ7SwZSDGGzL63OBbncNhg'],
								  success () { }
								})
							}
						})

					},
					fail: function(err) {
						that.content = "支付失败，跳转到订单"
						that.show = true

					}
				});
			},
			goinfo(item) {
				
				item['ticketQrcode'] = this.ticketret(item.ticketInfo)
				//item['ticketQrcode'] = '2e123123123123'
				uni.setStorageSync('ticketinfo', item)

				uni.navigateTo({
					url: '/pages/ticketinfo/ticketinfo'
				});
			},
			stringToByte(str) {
				var bytes = new Array();
				var len, c;
				len = str.length;
				for (var i = 0; i < len; i++) {
					c = str.charCodeAt(i);
					if (c >= 0x010000 && c <= 0x10FFFF) {
						bytes.push(((c >> 18) & 0x07) | 0xF0);
						bytes.push(((c >> 12) & 0x3F) | 0x80);
						bytes.push(((c >> 6) & 0x3F) | 0x80);
						bytes.push((c & 0x3F) | 0x80);
					} else if (c >= 0x000800 && c <= 0x00FFFF) {
						bytes.push(((c >> 12) & 0x0F) | 0xE0);
						bytes.push(((c >> 6) & 0x3F) | 0x80);
						bytes.push((c & 0x3F) | 0x80);
					} else if (c >= 0x000080 && c <= 0x0007FF) {
						bytes.push(((c >> 6) & 0x1F) | 0xC0);
						bytes.push((c & 0x3F) | 0x80);
					} else {
						bytes.push(c & 0xFF);
					}
				}
				return bytes;
			},
			getOrderlist() {
				let that = this;
				uni.request({
					url: Config.ServerIP + "/wxpay/app/pay/payOrder/list",
					method: "POST",
					data: {
						direction: "desc",
						pageNum: "1",
						pageSize: "50"
					},
					header: {
						Authorization: 'Bearer ' + Config.token
					},
					success: (res) => {

						if (res.data.code == 200) {
							//that.orderlist = res.data.data
							for (var i = 0; i < res.data.data.length; i++) {
								if(res.data.data[i].orderStatus != "C"){
									that.orderlist.push(res.data.data[i])
								}else{
									uni.request({
										url: Config.ServerIP + "/wxpay/app/pay/payOrder/" + res.data.data[i].id,
										method: "DELETE",
										header: {
											Authorization: 'Bearer ' + Config.token
										},
										success: () => {
											
									
										}
									})
								}
							}
							if(that.orderlist.length <=0){
								that.isNull =true
							}else{
								that.isNull =false
							}
						} else if (res.data.code == 401) {
							uni.redirectTo({
								url: '/pages/login/login?path=/pages/orderlist/orderlist'
							});
						}

					},
					complete() {
						uni.stopPullDownRefresh()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.hide {
		display: -webkit-box;
		/*设置为弹性盒子*/
		-webkit-line-clamp: 1;
		/*最多显示1行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*超出显示为省略号*/
		-webkit-box-orient: vertical;
		/* 从上向下垂直排列子元素。 */
	}

	.cards {
		margin-top: 15rpx;
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 20rpx;
	}
	
	.dot {
	font-family: simsun;
	}
	:root .dot { 
	display: inline-block;
	width: 1.5em;
	vertical-align: bottom;
	overflow: hidden;
	}
	@-webkit-keyframes dot {
	0% { width: 0; margin-right: 1.5em; }
	33% { width: .5em; margin-right: 1em; }
	66% { width: 1em; margin-right: .5em; }
	100% { width: 1.5em; margin-right: 0;}
	}
	.dot {
	-webkit-animation: dot 3s infinite step-start;
	}
	
	@keyframes dot {
	0% { width: 0; margin-right: 1.5em; }
	33% { width: .5em; margin-right: 1em; }
	66% { width: 1em; margin-right: .5em; }
	100% { width: 1.5em; margin-right: 0;}
	}
	.dot {
	animation: dot 3s infinite step-start;
	}
</style>
